<template>
	<div style="height: 100%;">
		<div>map-talks</div>
		<div id="map-talks" style="height: 800px;"></div>
	</div>
</template>

<script>
	import ToolLoadJs from "@/tool/ToolLoadJs.js";
	
	export default {
		mounted() {
			ToolLoadJs.loadCss("https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css");
			ToolLoadJs.loadJS("https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js", () => {
				console.log(maptalks);
				var map = new maptalks.Map('map-talks', {
				 center: [0, 0],
				 zoom: 2,
				 baseLayer: new maptalks.TileLayer('base', {
				   'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
				   'subdomains'  : ['a','b','c','d'],
				   'attribution'  : '&copy; <a href="http://www.osm.org/copyright">OSM</a> contributors, '+
				   '&copy; <a href="https://carto.com/attributions">CARTO</a>'
				 })
			   });
			   console.log(map);
			})
		}
	}
</script>

<style scoped>
</style>